<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>观看电影的用户的年龄的分布情况</title>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/echarts/3.8.5/echarts-en.min.js"></script>
</head>

<body>
<div id="main" style="width:860px;height: 450px; margin: 50px auto;"></div>
<script type="text/javascript">

    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    var option = {};
    $.ajax({
        url : "http://localhost:9082/ageDistribute",
        type: "get",
        success: function(result) {
            var xlabel = result.map(function(t){return t.label});
            var count = result.map(function (t) {return t.count});
            // 指定图表的配置项和数据
            option = {
                title: {
                    text: '观看电影的用户的年龄的分布情况'
                },
                tooltip: {},
                toolbox: {
                    show: true,
                    feature: {
                        magicType : {show: true, type: ['line', 'bar']},
                        restore: {
                            show: true
                        }
                    }
                },
                legend: {
                    data: ['人数']
                },
                xAxis: {
                    type: "category",
                    data: xlabel
                },
                yAxis: {
                    type : 'value'
                },
                series: [{
                    name: '人数',
                    type: 'bar',
                    data: count
                }]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }
    });


</script>
</body>
</html>